<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>index</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <script language="javascript" type="text/javascript" src="jquery-1.3.2.js"></script>
    </head>
    <style type="text/css" media="screen">
        body{
            background:#fff url(desc.png) no-repeat 50px 100px;
            font-family:Arial;
            height:2000px;
        }
        .header{
            width:600px;
            height:56px;
            position:absolute;
            top:0px;
            left:25%;
            background:#fff url(title.png) no-repeat top left;
        }
        a.back{
            width:256px;
            height:73px;
            position:fixed;
            bottom:15px;
            right:15px;
            background:#fff url(codrops_back.png) no-repeat top left;
        }
        .scroll{
            width:133px;
            height:61px;
            position:fixed;
            bottom:15px;
            left:150px;
            background:#fff url(scroll.png) no-repeat top left;
        }
        .info{
            text-align:right;
        }
        ul#navigation{
            position:fixed;
            margin:0px;
            padding:0px;
            top:0px;
            right:10px;
            list-style:none;
            z-index:9999;
            width:721px;
        }
        ul#navigation li{
            width:103px;
            display:inline;
            float:left;
        }
        ul#navigation li a{
            display:block;
            float:left;
            margin-top:-2px;
            width:100px;
            height:25px;
            background-color:#E7F2F9;
            background-repeat:no-repeat;
            background-position:50% 10px;
            border:1px solid #BDDCEF;
            -moz-border-radius:0px 0px 10px 10px;
            -webkit-border-bottom-right-radius:10px;
            -webkit-border-bottom-left-radius:10px;
            -khtml-border-bottom-right-radius:10px;
            -khtml-border-bottom-left-radius:10px;
            text-decoration:none;
            text-align:center;
            padding-top:80px;
            opacity:0.6;
            filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
        }
        ul#navigation li a:hover{
            background-color:#CAE3F2;
        }
        ul#navigation li a span{
            letter-spacing:2px;
            font-size:11px;
            color:#60ACD8;
            text-shadow:0 -1px 1px #fff;
        }
        ul#navigation .home a{
            background-image:url(images/home.png);
        }
        ul#navigation .about a{
            background-image:url(images/id_card.png);
        }
        ul#navigation .search a{
            background-image:url(images/search.png);
        }
        
    </style>
    <body>
        <div class="header"></div>
        <div class="scroll"></div>
        <ul id="navigation">
            <li class="home"><a href=""><span>Home</span></a></li>
            <li class="about"><a href=""><span>About</span></a></li>
            <li class="search"><a href=""><span>Search</span></a></li>
        </ul>
        <div class="info">
        	<a href="http://www.codrops.com" class="back"></a>
        	<a href="http://dryicons.com">Icons by DryIcons.com</a>
        </div>
        
        <script language="javascript" type="text/javascript">
            $(function() {
                var d=300;
                $('#navigation a').each(function(){
                    $(this).stop().animate({
                        'marginTop':'-80px'
                    }, d+=150);
                });

                $('#navigation>li').hover(
                    function(){
                        $('a', $(this)).stop().animate({'marginTop':'-2px'}, 200);
                    }, 
                    function(){
                        $('a', $(this)).stop().animate({'marginTop':'-80px'}, 200);
                    }
                );
            });
        </script>
    </body>
</html>
